<template>
	<view :style="colorStyle">
		<!-- <view class="mp-header"
			style="background: linear-gradient(to bottom, rgb(254, 242, 240) 0%, rgb(254, 250, 244) 70%, rgb(255, 255, 255) 100%);">
			<view class="serch-wrapper acea-row row-middle" :style="'padding-left:'+ 17*2 +'rpx;'">
				<view class="logo skeleton-rect">
					<image src="/static/images/logo.png" mode="heightFix"></image>
				</view>
				<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect" hover-class="none"><text
						class="iconfont icon-sousuo"></text>
					{{$t(`搜索商品`)}}</navigator>
			</view>
		</view> -->
		
		<view class="mp-header"
			style="background: linear-gradient(to bottom, rgb(254, 242, 240) 0%, rgb(254, 250, 244) 70%, rgb(255, 255, 255) 100%);">
			<view class="sys-head" :style="{ height: statusBarHeight }"></view>
			<view class="serch-box" style="height: 43px;">
				<view class="serch-wrapper acea-row row-middle" :style="'padding-left:'+ 17*2 +'rpx;'">
					<view class="logo skeleton-rect">
						<image src="/static/images/logo.png" mode="heightFix"></image>
					</view>
					<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect"
						 hover-class="none">
						<text class="iconfont icon-sousuo"></text>
						{{$t(`搜索商品名称`)}}
					</navigator>
				</view>
			</view>
		</view>
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<view class="sys-head" style="height: 43px;"></view>
		<goodsCate1 v-if="category == 1" ref="classOne" :isNew="isNew"></goodsCate1>
		<goodsCate2 v-if="category == 2" ref="classTwo" :isNew="isNew" @jumpIndex="jumpIndex"></goodsCate2>
		<goodsCate4 v-if="category == 3" ref="classThree" :isNew="isNew" @jumpIndex="jumpIndex"></goodsCate4>
		
		<tabBar v-if="!is_diy" :pagePath="'/pages/user/index'"></tabBar>
		<pageFooter v-else></pageFooter>
	</view>
</template>

<script>
import colors from '@/mixins/color';
import goodsCate1 from './goods_cate1';
import goodsCate2 from './goods_cate2';
import goodsCate4 from './goods_cate4';
import { colorChange } from '@/api/api.js';
import { mapGetters } from 'vuex';
import { getCategoryVersion } from '@/api/public.js';
import tabBar from "@/pages/index/visualization/components/tabBar.vue";
import pageFooter from '@/components/pageFooter/index.vue'
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
	computed: mapGetters(['isLogin', 'uid']),
	components: {
		goodsCate1,
		goodsCate2,
		goodsCate4,
		tabBar,
		pageFooter
	},
	mixins: [colors],
	data() {
		return {
			category: '',
			is_diy: uni.getStorageSync('is_diy'),
			status: 0,
			version: '',
			isNew: false,
			statusBarHeight: statusBarHeight
		};
	},
	onLoad() {},
	onReady() {},
	onShow() {
		this.getCategoryVersion();
	},
	methods: {
		pageBack(){
			console.log('返回')
			uni.navigateBack();
		},
		getCategoryVersion() {
			uni.$emit('uploadFooter');
			getCategoryVersion().then((res) => {
				if (!uni.getStorageSync('CAT_VERSION') || res.data.version != uni.getStorageSync('CAT_VERSION')) {
					uni.setStorageSync('CAT_VERSION', res.data.version);
					uni.$emit('uploadCatData');
				}
				this.classStyle();
			});
		},
		jumpIndex() {
			// uni.reLaunch({
			// 	url: '/pages/index/index'
			// })
		},
		classStyle() {
			colorChange('category').then((res) => {
				let status = res.data.status;
				this.category = status;
				uni.setStorageSync('is_diy', res.data.is_diy);
				this.$nextTick((e) => {
					if (status == 2 || status == 3) {
						uni.hideTabBar();
					} else {
						this.$refs.classOne.is_diy = res.data.is_diy;
						if (!this.is_diy) {
							uni.hideTabBar();
						} else {
							this.$refs.classOne.getNav();
						}
					}
				});
			});
		}
	},
	onReachBottom: function () {
		if (this.category == 2) {
			this.$refs.classTwo.productslist();
		}
		if (this.category == 3) {
			this.$refs.classThree.productslist();
		}
	}
};
</script>
<style scoped lang="scss">
/deep/.mask {
	z-index: 99;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
	display: none;
}

/* #ifdef MP || APP-PLUS */
	.mp-header {
		z-index: 30;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);

		.serch-wrapper {
			height: 100%;
			/* #ifdef MP */
			padding: 0 200rpx 0 53rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			padding: 0 50rpx 0 40rpx;
      /* #endif */
			.logo {
				height: 60rpx;
				margin-right: 30rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.input {
				flex: 1;
				height: 64rpx;
				padding: 0 0 0 30rpx;
				background: rgba(247, 247, 247, 1);
				border: 1px solid #000;
				color: #BBBBBB;
				font-size: 28rpx;
				border-radius: 30px;

				.iconfont {
					margin-right: 20rpx;
					font-size: 20px;
					color: #000;
				}

				// 没有logo，直接搜索框
				&.on {
					/* #ifdef MP */
					width: 70%;
					/* #endif */
					/* #ifdef APP-PLUS */
					width: 100%;
					/* #endif */
				}

				// 设置圆角
				&.fillet {
					border-radius: 50rpx;
				}

				// 文本框文字居中
				&.row-center {
					padding: 0;
				}
			}
		}
	}

	/* #endif */
	
	.header {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
	
		.serch-wrapper {
			padding: 20rpx 20rpx 0 0;
	
			.logo {
				height: 60rpx;
				margin-right: 20rpx;
				width: 154rpx;
				text-align: center;
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.input {
				flex: 1;
				height: 80rpx;
				padding: 0 0 0 30rpx;
				background: rgba(247, 247, 247, 1);
				border: 1px solid rgba(241, 241, 241, 1);
				color: #BBBBBB;
				font-size: 28rpx;
				border-radius: 30px;
	
				.iconfont {
					margin-right: 20rpx;
				}
	
				// 没有logo，直接搜索框
				&.on {
					width: 100%;
				}
	
				// 设置圆角
				&.fillet {
					border-radius: 29rpx;
				}
	
				// 文本框文字居中
				&.row-center {
					padding: 0;
				}
			}
		}
	}
</style>
